<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Composition API</title>
  </head>
  <body>
    <div id="app">
      <!-- x: {{ position.x }} <br /> -->
      <!-- y: {{ position.y }} <br /> -->
      x: {{ x }} <br />
      y: {{ y }} <br />
    </div>
    <script type="module">
      import {
        createApp,
        reactive,
        onMounted,
        onUnmounted,
        toRefs
      } from './node_modules/vue/dist/vue.esm-browser.js'

      function useMousePosition() {
        const position = reactive({
          x: 0,
          y: 0
        })

        const update = (e) => {
          position.x = e.pageX
          position.y = e.pageY
        }

        onMounted(() => {
          window.addEventListener('mousemove', update)
        })

        onUnmounted(() => {
          window.removeEventListener('mousemove', update)
        })

        return toRefs(position)
      }

      const app = createApp({
        setup() {
          // const position = useMousePosition()
          const { x, y } = useMousePosition()
          return {
            // position
            x,
            y
          }
        }
      })

      app.mount('#app')

      // console.log(app)
    </script>
  </body>
</html>
